<!--
 * @Description: 功能管理
 * @Author: 
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-04 17:24:26
-->
<template>
  <div class="pages_content table function">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex;">
        <div class="main_left scroll" style="width: 200px;padding: 20px;">
          <div>
            <el-tree :key="time" default-expand-all :data="treeData" class="tree-line" :indent="0" :props="defaultProps" :expand-on-click-node="false" @node-click="treeSelect">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <icon v-if="data.hierarchytyp=='system'" :name="data.icon" :w="22" :h="14" style="padding: 0 4px;"></icon>
                <icon v-else :name="data.folderType==1?'tree_icon_folder_open': data.icon" :w="22" :h="14" style="padding: 0 4px;"></icon>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="main_right">
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px;">名称</span>
                  <el-input v-model="tableParam.name" style="width: 200px;" clearable placeholder="请输入"  @keyup.enter.native="queryPage()"/>
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">编码</span>
                  <el-input v-model="tableParam.code" style="width: 200px;" clearable placeholder="请输入"  @keyup.enter.native="queryPage()"/>
                </span>
                <el-button size="medium" icon="el-icon-search" class="bottom_all" @click="(tableParam.page = 1), queryPage()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_nav">
              <div>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0;" @click="add()">
                  <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                  添加
                </el-button>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" size="small" class="bottom_two" @click="batchUpdateOrDelete('update_status', 0)">
                  <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                  删除
                </el-button>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='RIYONG'))!==-1&&parentId!=='202d9563a4be4345b0428b12eb84432d'&&parentId!=='e41f969aa857450e9314a5a3d33d888f'" size="small" class="bottom_three" @click="batchUpdateOrDelete('update_enable', 1)">
                  <i class="icon iconfont iconicon_button_startuse" style="font-size: 12px;"></i>
                  启用
                </el-button>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JINYONG'))!==-1&&parentId!=='202d9563a4be4345b0428b12eb84432d'&&parentId!=='e41f969aa857450e9314a5a3d33d888f'" size="small" class="bottom_four" @click="batchUpdateOrDelete('update_enable', 0)">
                  <i class="icon iconfont iconicon_button_disable1" style="font-size: 12px;"></i>
                  禁用
                </el-button>

                <el-button size="small" class="botton_five" @click="moveDialog()">移动</el-button>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='ANPEIZ'))!==-1" size="small" class="botton_six" @click="buttonConfig()">按钮配置</el-button>
              </div>
              <div>
                <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='BAOCUNPXH'))!==-1" :underline="false" @click="updateSortNum()">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_sort1"></i>
                  </span>
                  保存排序号
                </el-link>
                <el-dropdown trigger="click" :hide-on-click="false" style="margin: 0 20px;">
                  <el-link :underline="false">
                    <span class="el-icon--left">
                      <i class="iconfont iconicon_button_filtrate"></i>
                    </span>
                    筛选
                  </el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in table" :key="index">
                      <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="$Download(DownloadURL, tableParam)">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_export1"></i>
                  </span>
                  导出
                </el-link>
              </div>
            </div>
            <!-- 列表 -->
            <div class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="50"></el-table-column>
                <template v-for="(item, index) in table">
                  <el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :width="item.width" :fixed=" item.label =='操作'?'right':false">
                    <template slot-scope="scope">
                      <span v-if="item.label == '类型'">{{ scope.row.type == 1 ? 'PC' : scope.row.type == 2 ? '移动端' : scope.row.type == 3 ? '微信小程序' : '首页' }}</span>
                      <div v-else-if=" item.label == '状态'">
                        <span v-if="scope.row.enable == 0&&scope.row.type==1" style="color:#969799;">禁用</span>
                        <span v-if="scope.row.enable == 1&&scope.row.type==1" style="color:#00A754;">启用</span>
                      </div>
                      <el-button v-else-if="item.label == '操作'&&ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="update(scope.row)">
                        <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
                        修改
                      </el-button>
                      <div v-else-if="item.label == '排序号'">
                        <el-input v-model="scope.row.sortNum"></el-input>
                      </div>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <div v-if="show" class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @current-change="queryPage()" @size-change="sizeChange"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="queryPage()">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" width="680px" :before-close="resefrom" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{ dialogtitle }}</span>
      <div class="dialoginfo">
        <el-form ref="dialogForm" :rules="rules" :inline="true" :model="from" label-width="90px">
          <el-form-item prop="name">
            <span slot="label" style="color:  #FF0000 ;">名称</span>
            <el-input v-model="from.name" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label" style="color:  #FF0000 ;">编码</span>
            <el-input v-model="from.code" placeholder="请输入" clearable @input="changecode"></el-input>
          </el-form-item>
          <el-form-item prop="businessLine">
            <span slot="label">业务线</span>
            <el-input v-model="from.businessLine" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="redirectUrl">
            <span slot="label">URL</span>
            <el-input v-model="from.redirectUrl" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="type">
            <span slot="label">类型</span>
            <el-select v-model="from.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="type">
            <span slot="label">功能类型</span>
            <!-- 这里写死了的不能用数据字典，后面业务判断已经不能改 -->
            <el-select v-model="from.folderType" placeholder="请选择">
              <el-option label="文件夹" :value="1"></el-option>
              <el-option label="功能页" :value="0"></el-option>
              <el-option label="外部链接" :value="2"></el-option>
              <el-option label="内部链接" :value="3"></el-option>
              <el-option label="移动端标签" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sortNum">
            <span slot="label">排序号</span>
            <el-input v-model="from.sortNum" placeholder="请输入" type="Number" clearable />
          </el-form-item>
          <el-form-item prop="levelNum">
            <span slot="label">等级</span>
            <el-input v-model="from.levelNum" placeholder="请输入" clearable />
          </el-form-item>
          <div>
            <el-form-item v-if="from.type!==1&&from.type">
              <span slot="label">图标</span>
              <el-upload class="avatar-uploader" action="/resource/resources/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="upheader">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <el-form-item label="是否看板" prop="whetherKanban">
            <el-radio-group v-model="from.whetherKanban">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="enable">
            <el-radio-group v-model="from.enable">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="from.description" placeholder="请填写描述" class="textarea" type="textarea" resize="none" rows="5"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resefrom()">取 消</el-button>
        <el-button class="bottom_all" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 按钮配置 -->
    <el-dialog v-dialogDrag :visible.sync="buttonVisible" width="80%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">按钮配置</span>
      <el-row :gutter="20">
        <el-col :span="7">
          <div v-loading="loadingInstance" class="menu-container">
            <div class="menu-title">功能菜单</div>
            <div style="padding: 20px;height:690px;overflow: hidden;overflow-y: auto;">
              <el-tree default-expand-all :data="treeData" class="tree-line" :indent="0" :props="defaultProps" :expand-on-click-node="false" @node-click="getButton">
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <icon v-if="data.hierarchytyp=='system'" :name="data.icon" :w="22" :h="14" style="padding: 0 4px;"></icon>
                  <icon v-else :name="data.folderType==1?'tree_icon_folder_open': data.icon" :w="22" :h="14" style="padding: 0 4px;"></icon>
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="button-container">
            <div class="button-title">按钮
              <el-input v-model="checkInput" placeholder="模糊搜索" style="width:200px;margin-left:10px;" @input="checkInputFun(checkInput)"></el-input>
            </div>
            <div class="button-main">
              <el-table v-loading="loadingInstance" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none', fontSize: '10px' }" border stripe style="width:100%" height="650" :data="buttonList" tooltip-effect="dark" :span-method="arraySpanMethod">
                <el-table-column align="center" width="50">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.status" @change="changerow(scope.row, 0)"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column label="编码" align="center" prop="itemValue" />
                <el-table-column label="名称" align="center" prop="itemName" />
                <el-table-column label="位置" align="center">
                  <template slot-scope="scope">
                    <el-select v-if="scope.row.itemValue!=='XIANSHI'&&scope.row.itemValue!=='XIAOSHOUKANBAN'" v-model="scope.row.buttonLocation" placeholder="请选择" @change="changerow(scope.row, 1)">
                      <el-option label="全局(多选数据)" :value="0"></el-option>
                      <el-option label="行内(单条数据)" :value="1"></el-option>
                    </el-select>
                    <span v-else-if="scope.row.itemValue=='XIANSHI'" style="color:red;">除看板外的页面的通用按钮【无按钮则需要配置显示选项，有按钮则不用配置】</span>
                    <span v-else style="color:red;">销售看板特有的按钮【仅在自定义销售看板配置,有且只配置这一个】</span>
                  </template>
                </el-table-column>
                <el-table-column label="类型" align="center">
                  <template slot-scope="scope">
                    <el-select v-if="scope.row.itemValue!=='XIANSHI'" v-model="scope.row.type" placeholder="请选择" @change="changerow(scope.row, 1)">
                      <el-option label="弹窗" :value="1"></el-option>
                      <el-option label="提示" :value="2"></el-option>
                      <el-option label="新页面" :value="3"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="buttonVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 移动功能 -->
    <el-dialog v-dialogDrag :visible.sync="moveVisible" width="480px" custom-class="move_dialog" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">移动</span>
      <div class="traaDate-info scroll">
        <el-tree default-expand-all :data="treeData1" class="tree-line" :indent="0" :props="defaultProps" :expand-on-click-node="false" @node-click="getButton1">
          <span slot-scope="{ node,data }" class="custom-tree-node">
            <el-radio-group v-model="treearrId">
              <el-radio :label="data.id">
                <span>{{ node.label }}</span>
              </el-radio>
            </el-radio-group>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="moveVisible=false">取 消</el-button>
        <el-button class="bottom_all" @click="savemove()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import breaDcrumb from "@/components/breadcrumb";
import { mapGetters } from "vuex";
import { queryPage as querybusinessPage } from "@/api/basedata/business.js";
import {
  getTreeList,
  queryPage,
  saveOrUpdate,
  batchUpdateOrDelete,
  updateSortNum,
  ButtongetList,
  buttonsaveOrUpdate, Download, move
} from "@/api/basedata/function.js";
import { getDicType } from "@/api/common";
import { codeReg, sortReg } from "@/common/RegExp.js";
import { _debounce } from '@/utils/utils'
import { getToken, getUserId } from '@/utils/auth';
export default {
  components: {
    breaDcrumb,
    //treeContainer
  },
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback();
      } else {
        callback(new Error("请输正整数等级!"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback();
      } else {
        callback(new Error("请输正整数序号!"));
      }
    };
    return {
      upheader: {
        "access-token": getToken(),
        "user-id": getUserId(),
      },
      treearrId: '',
      treeData1: [],
      moveVisible: false,
      folderTypeList: [],
      DownloadURL: Download,
      defaultProps: {
        children: "children",
        label: "name",
      },
      color: "",
      /*添加修改弹窗*/
      dialogVisible: false,
      imageUrl: '',
      buttonVisible: false,
      dialogtitle: "添加功能",
      options: [
        { label: "PC", value: 1 },
        { label: "移动端", value: 2 },
        { label: "微信小程序", value: 3 },
      ],
      /*弹要修改过着添加的数据*/
      from: {
        code: "",
        name: "",
        description: "",
        businessLine: "",
        redirectUrl: "",
        type: null,
        levelNum: "",
        icon: "",
        sortNum: "",
        enable: 1,
        whetherKanban: 0,
      },
      parentId: "",
      systemName: "",
      systemId: "",
      /*判断收起展开*/
      showCardNav: true,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        businessLine: [
          { required: true, message: "请输入业务线", trigger: "blur" },
        ],
        redirectUrl: [
          { required: true, message: "请输入URL", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        levelNum: [{ required: true, message: "请输入等级", trigger: "blur" },
        { validator: validatePass1, trigger: "blur", }],
        sortNum: [{ required: true, message: "请输入排序号", trigger: "blur" },
        { validator: validatePass2, trigger: "blur", }
        ],
      },
      table: [
        { label: "编码", width: "180", prop: "code", status: true },
        { label: "名称", width: "180", prop: "name", status: true },
        { label: "描述", width: "180", prop: "description", status: true },
        { label: "业务线", width: "180", prop: "businessLine", status: true },
        { label: "所属系统", width: "120", prop: "systemName", status: true },
        { label: "等级", width: "auto", prop: "levelNum", status: true },
        { label: "类型", width: "auto", prop: "type", status: true },
        { label: "URL", width: "160", prop: "redirectUrl", status: true },
        { label: "排序号", width: "auto", prop: "sortNum", status: true },
        { label: "状态", width: "auto", prop: "enable", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        code: "",
        name: "",
      },
      tableData: [],
      buttonList0: [],
      buttonList: [],
      oldbuttonList: [],
      functionId: null,
      checkButtonlist: [],
      total: 0,
      ids: [],
      sortIds: [],
      treeData: [],
      time: "",
      imgUrl: '',
      ButtonList: [],
      show: true,
      loadingInstance: null,
      checkInput: '',
      selectData: {},
    };
  },
  mounted() {
    this.ButtonList = this.$ButtonList()
    let params = {
      page: 1,
      pageSize: 9999999,
    };
    let _this = this;
    querybusinessPage(params).then((res) => {
      res.data.data.forEach((item) => {
        item.children = [];
        item.hierarchytyp = "system";
        item.icon = "tree_icon_folder_open";
      });
      _this.treeData = res.data.data;
      _this.treeData1 = JSON.parse(JSON.stringify(res.data.data));
    });
    _this.queryPage();
    _this.getButtonList()
  },
  methods: {
    checkInputFun(val) {
      if (val) {
        this.buttonList = this.buttonList0.filter((res) => res.itemName.includes(val))
      } else {
        this.buttonList = this.buttonList0
      }
      /*数据回显*/
      this.loadingInstance = true
      ButtongetList({ functionId: this.functionId }).then((res) => {
        if (res.data.length !== 0) {
          res.data.forEach((item) => {
            let index = this.buttonList.findIndex(items => (items.id == item.buttonId))
            if (index !== -1) {
              this.buttonList[index].status = true;
              this.buttonList[index].buttonLocation = item.buttonLocation;
              this.buttonList[index].type = item.type;
              this.buttonList[index].pid = item.id;
            }
          });
        }
        this.loadingInstance = false
        console.log(this.buttonList)
      });
    },
    /**移动*/
    moveDialog() {
      let _this = this
      if (_this.ids.length == 0) {
        _this.$message({
          message: "请选择要操作的数据项",
          type: "warning",
        });
        return;
      }
      _this.moveVisible = true
    },
    savemove() {
      let _this = this
      move({ ids: _this.ids.join(','), parentId: _this.treearrId }).then(res => {
        if (res.code == 1001) {
          _this.$message({
            message: '移动成功',
            type: 'success'
          });
          this.treeSelect(this.selectData);
          _this.moveVisible = false
        }
      })
    },
    arraySpanMethod({ row, columnIndex }) {
      if (row.itemValue == 'XIANSHI' || row.itemValue == 'XIAOSHOUKANBAN') {
        if (columnIndex == 3) {
          /**寻找初始坐标，合并行列*/
          return [1, 2];
        }
      }

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code === 1001) {
        this.imgUrl = res.data.fileUrl;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传的图片格式不正确');
      }
      if (!isLt2M) {
        this.$message.error('上传的图片大小不能超过2M');
      }
      return isJPG && isLt2M;
    },
    changecode() {
      this.from.code = codeReg(this.from.code);
    },
    /**获取按钮和功能配置*/
    getButton(e) {
      this.checkInput = ''
      this.loadingInstance = true
      let _this = this
      if (e.hierarchytyp == 'system' || (e.hierarchytyp == 'function' && e.folderType == 1)) {
        getTreeList({ parentId: e.id, type: "" }).then((res) => {
          res.data.forEach((item) => {
            item.children = [];
            item.hierarchytyp = "function";
            item.icon = "tree_icon_text";
          });
          e.children = res.data;
          this.loadingInstance = false
        });
        this.buttonList = [];
        return
      }
      this.buttonList = JSON.parse(JSON.stringify(_this.oldbuttonList))
      this.buttonList0 = JSON.parse(JSON.stringify(_this.oldbuttonList))
      this.functionId = e.id;
      /*数据回显*/
      this.loadingInstance = true
      ButtongetList({ functionId: e.id }).then((res) => {
        if (res.data.length !== 0) {
          res.data.forEach((item) => {
            let index = this.buttonList.findIndex(items => (items.id == item.buttonId))
            if (index !== -1) {
              this.buttonList[index].status = true;
              this.buttonList[index].buttonLocation = item.buttonLocation;
              this.buttonList[index].type = item.type;
              this.buttonList[index].pid = item.id;
            }
          });
        }
        this.loadingInstance = false
        console.log(this.buttonList)
      });
    },
    getButton1(e) {
      if (e.hierarchytyp == 'system' || (e.hierarchytyp == 'function' && e.folderType == 1)) {
        getTreeList({ parentId: e.id, type: "" }).then((res) => {
          let arr = res.data.filter(res => (res.folderType == 1))
          arr.forEach((item) => {
            item.children = [];
            item.hierarchytyp = "function";
            item.icon = "tree_icon_text";
          });
          e.children = arr;
        });
        return
      }
    },
    /**获取字典的按钮配置*/
    getButtonList() {
      let _this = this
      let data = {
        code: "button",
      };
      getDicType(data).then((res) => {
        _this.oldbuttonList = [];
        res.data.items.forEach((item) => {
          _this.oldbuttonList.push({
            code: item.code,
            id: item.id,
            itemName: item.itemName,
            itemValue: item.itemValue,
            buttonLocation: "",
            pid: '',
            // imgIcon: "",
            type: "",
            status: false,
          });
        });
      });
    },
    savebutton: _debounce(function (item) {
      this.loadingInstance = true
      let button = new Object();
      if (this.functionId) {
        console.log(item.pid)
        if (item.pid) {
          button.id = item.pid;
        }
        button.buttonId = item.id;
        button.buttonLocation = item.buttonLocation;
        button.buttonName = item.itemName;
        button.buttonValue = item.itemValue;
        button.type = item.type;
        button.status = item.status ? 1 : 0;
        button.functionId = this.functionId;
        buttonsaveOrUpdate(button).then(() => {
          this.getButton({ id: this.functionId });
        });
      }
    }, 200),
    changerow(item, num) {
      console.log(99);
      if (item.status && num == 1) {
        this.savebutton(item)
        return
      }
      if (num == 0) {
        this.savebutton(item)
      }
    },
    /**树状数据选择*/
    treeSelect(e) {
      this.show = false
      if (e.hierarchytyp == 'function' && e.folderType == 0) {
        this.systemId = '';
        this.tableData = [e];
        return
      }
      this.selectData = e;
      this.parentId = e.id;
      if (e.hierarchytyp == "system") {
        this.systemId = e.id;
        this.systemName = e.name;
      } else {
        this.systemId = e.systemId;
        this.systemName = e.systemName;
      }
      this.hierarchytyp = e.hierarchytyp;
      getTreeList({ parentId: e.id, type: "" }).then((res) => {
        res.data.forEach((item) => {
          item.children = [];
          item.hierarchytyp = "function";
          item.icons = item.icon || '';
          item.icon = "tree_icon_text";
        });
        e.children = res.data;
        this.tableData = e.children
      });
    },
    buttonConfig() {
      this.buttonVisible = true;
    },
    save() {
      let _this = this;
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          saveOrUpdate({
            ..._this.from,
            icon: this.imgUrl,
            systemName: this.systemName,
            systemId: this.systemId,
            parentId: this.parentId,
          }).then((res) => {
            if (res.code === 1001) {
              _this.$message({
                message: "操作成功！！！",
                type: "success",
              });
              if (this.selectData.id) {
                this.treeSelect(this.selectData);
              }
              this.imageUrl = '';
              this.imgUrl = '';
              _this.resefrom();
              _this.queryPage();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resefrom() {
      this.dialogVisible = false;
      this.systemId = "";
      this.systemName = "";
      this.time = new Date().getTime();
    },
    /*重置*/
    reset() {
      this.tableParam.code = "";
      this.tableParam.name = "";
      this.show = true
      this.queryPage();
    },
    /*添加*/
    add() {
      if (!this.systemId) {
        this.$message({
          message: "警告哦，请先在左侧选择系统或者功能模块后添加",
          type: "warning",
        });
        return;
      }
      this.dialogVisible = true;
      this.$data.from = this.$options.data().from;
      console.log(this.from);
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate();
      }, 10);
      this.dialogtitle = "添加功能";
    },
    /*获取列表*/
    queryPage() {
      queryPage(this.tableParam).then((res) => {
        this.total = res.data.totalRows;
        this.tableData = res.data.data;
      });
    },
    /*删除，禁用，启用，排序*/
    batchUpdateOrDelete(type, status) {
      if (this.ids.length == 0) {
        this.$message({
          message: "请选择要操作的数据项",
          type: "warning",
        });
        return;
      }
      if (type === "update_status") {
        this.$confirm("此操作将永久删除该信息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            batchUpdateOrDelete({
              ids: this.ids,
              status: status,
              type: type,
            }).then(() => {
              this.reset();
            });
          })
          .catch(() => { });
      } else {
        batchUpdateOrDelete({
          ids: this.ids,
          status: status,
          type: type,
        }).then(() => {
          this.queryPage();
        });
      }
    },
    /*更新排序号*/
    updateSortNum() {
      const sorts = []
      this.tableData.forEach((v) => {
        sorts.push({ id: v.id, sortNum: v.sortNum })
      })
      updateSortNum(sorts).then((res) => {
        if (res.code === 1001) {
          this.$message.success('更新成功')
          this.queryPage();
        }
      });
    },
    /*修改*/
    update(data) {
      this.from = data;
      this.imageUrl = process.env.VUE_APP_API_FILe + (data.icons || data.icon);
      this.imgUrl = data.icons || data.icon;
      this.systemId = data.systemId;
      this.parentId = data.parentId;
      this.dialogtitle = "更新功能";
      this.dialogVisible = true;
    },
    /*表头复选框*/
    handleSelectionChange(val) {
      let _this = this;
      _this.ids = [];
      _this.sortIds = [];
      val.forEach((item) => {
        _this.ids.push(item.id);
        _this.sortIds.push({ id: item.id, sortNum: item.sortNum });
      });
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.queryPage();
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 324;
      } else {
        num = this.screenWidth - 421;
      }
      return "width:" + num + "px;";
    },
  },
};
</script>
<style lang="scss">
.function {
  .traaDate-info {
    min-height: 400px;
    max-height: 600px;
    overflow: auto;
  }
  .button-main {
    padding: 20px;
    .el-input__inner {
      font-size: 12px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style lang="scss" scoped>
.main_left {
  overflow: auto;
}
.el-tree {
  display: inline-block;
}
.function {
  .dialoginfo {
    .el-input,
    .el-select {
      width: 200px;
    }
    .textarea {
      width: 500px;
    }
    .upload_bg {
      padding: 10px 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      height: 220px;
    }
    .upload {
      width: 200px;
      height: 200px;
      position: relative;
      .upload_add {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #c1c1c1;
      }
      .input {
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
      }
      input {
        opacity: 0;
      }
    }
  }
  .menu-container,
  .button-container {
    border: 1px solid rgba(225, 229, 237, 1);
    .menu-title {
      font-size: calc(#{$font_size} + 4px);
      padding: 12px 20px;
      border-bottom: 1px solid rgba(225, 229, 237, 1);
    }
    .button-title {
      padding: 12px 20px;
      font-size: calc(#{$font_size} + 4px);
      border-bottom: 1px solid rgba(225, 229, 237, 1);
    }
  }
}
</style>
